<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link href="css/css.css" type="text/css" rel="stylesheet">
  <link href="css/page5.css" type="text/css" rel="stylesheet">
  <script src="js/vue.global.js"></script>
  <script src="js/rem.js"></script>
  <link href="css/pdfh5.css" type="text/css" rel="stylesheet" />
  <script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/pdf.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/pdfh5.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/pdf.worker.js" type="text/javascript" charset="utf-8"></script>
  <title>Title</title>
</head>
<body>
<div id="app" class="main-content">
  <div class="content">
    <div class="title">
      <img src="images/page5/title.png">
    </div>
<!--    <div class="image">-->
<!--      <img src="images/page5/image2.png">-->
<!--    </div>-->
<!--    <div class="image i1">-->
<!--      <img src="images/page5/image1.png">-->
<!--    </div>-->
    <div class="content-group">
      <div class="content-group__btns">
        <div class="content-group__btn" @click="currContent=1">
          <img v-if="currContent==1" src="images/page5/b1_h.png">
          <img v-else src="images/page5/b1.png">
        </div>
        <div class="content-group__btn" @click="currContent=2">
          <img v-if="currContent==2" src="images/page5/b2_h.png">
          <img v-else src="images/page5/b2.png">
        </div>
        <div class="content-group__btn" @click="currContent=3">
          <img v-if="currContent==3" src="images/page5/b3_h.png">
          <img v-else src="images/page5/b3.png">
        </div>
      </div>
      <div class="content-group__content">
        <img v-if="currContent==1" src="images/page5/c1.png">
        <img v-if="currContent==2" src="images/page5/c2.png">
        <img v-if="currContent==3" src="images/page5/c3.png">
      </div>
    </div>
    <div class="bottom-bar">
      <div class="button" @click="contentPopup.show=true; contentPopup.content=1;">
        <img src="images/page5/button1.png">
      </div>
      <div class="button" @click="contentPopup.show=true; contentPopup.content=2;">
        <img src="images/page5/button2.png">
      </div>
<!--      <div v-if="currContent==0" class="subtitle"style="width: 10.92rem;margin-left:0">-->
<!--        <img src="images/page5/desc1.png">-->
<!--      </div>-->

<!--      <div v-if="currContent==3" class="subtitle"style="width: 9.59rem; position: absolute; bottom: 2.8rem;left: 8rem;">-->
<!--        <img src="images/page5/desc5.png">-->
<!--      </div>-->
      <div class="subtitle"style="width: 12.77rem;margin-left:0.2rem;">
        <img src="images/page5/desc4.png">
        <img v-if="currContent==2" src="images/page5/desc6.png">
        <img v-if="currContent==3" style="margin-top: 0.1rem;" src="images/page5/desc5.png">
      </div>

<!--      <div class="subtitle" style="width: 10.92rem; margin-left: 0;">-->
<!--        <img src="images/page5/desc1.png">-->
<!--      </div>-->
<!--      <div class="subtitle" style="width: 8.12rem;">-->
<!--        <img src="images/page5/desc2.png">-->
<!--      </div>-->
<!--      <div class="subtitle" style="width: 8.12rem;">-->
<!--        <img src="images/page5/desc4.png">-->
<!--      </div>-->
<!--      <div v-if="currContent==3" class="subtitle" style="width: 8.12rem;">-->
<!--        <img src="images/page5/desc3.png">-->
<!--      </div>-->
    </div>
  </div>

  <div class="docker">
    <div class="docker__button-group">
      <a class="button" id="button-home">
        <img src="images/docker-btn-catalogue.png">
      </a>
      <div class="button" @click="refPopup.show=true;refPopup.content=1">
        <img src="images/docker-btn-ref.png">
      </div>
      <div id="button-guide" class="button" @click="refPopup.show=true;refPopup.content=2">
        <img src="images/docker-btn-pi.png">
      </div>
    </div>
    <div style="flex: 0.5;"></div>
    <a class="logo" >
      <img src="images/logo2.png">
    </a>
  </div>

  <div class="popup center ref" :class="{ show: refPopup.show }">
    <div class="popup_mask" @click="refPopup.show=false"></div>
    <div class="popup_container">
      <div class="ref-frame">
        <div class="ref-head">
          <div v-if="refPopup.content==1" class="ref-head__title" style="width: 1.805rem;">
            <img src="images/ref-view-title.png">
          </div>
          <div v-if="refPopup.content==2" style="width: 8.785rem;" class="ref-head__title">
            <img src="images/pi-title.png">
          </div>
          <div class="ref-head__close" @click="refPopup.show=false">
            <img src="images/ref-view-close.png">
          </div>
        </div>
        <div class="ref-content">
          <div class="block-view" :style="{ width: refPopup.content==1?'17.27rem':'unset' }">
            <img v-if="refPopup.content==1" src="images/page5/ref.png">
            <img v-if="refPopup.content==2" src="images/pi-img.png">
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="popup center content-popup" :class="{ show: contentPopup.show }">
    <div class="popup_mask" @click="contentPopup.show=false"></div>
    <div class="popup_container flex-view" :style="{ 'padding-bottom': contentPopup.content==2?'0.8rem':'0' }">
      <div class="popup_container__close" @click="contentPopup.show=false">
        <img src="images/ref-view-close2.png">
      </div>
      <div v-if="contentPopup.content==1" class="popup_container__title" style="width: 3.26rem;align-self: flex-start; left: 0.8rem;top: 0.5rem; position:absolute;">
        <img style="width: 5.505rem;" src="images/page5/popup-title2.png">
      </div>
      <div v-if="contentPopup.content==1" class="popup_container__table" style="width: 100%; height: 100%; padding: 0; background-color: #D8E7EE; border-radius: 0.5rem;">
        <img src="images/page5/popup_content.png" style="width: 100%;">
      </div>
      <div v-if="contentPopup.content==2" class="popup_container__title" style="width: 3.26rem;align-self: flex-start; margin-left: 0.8rem;margin-top: 0.5rem;margin-bottom: 0.3rem;">
          <img src="images/page5/popup-title.png">
      </div>
      <div v-if="contentPopup.content==2" class="popup_container__table table" style="width: 17.19rem; height: 7.96rem;">
        <div class="table-frame">
          <div class="rectangle r1">
            <img src="images/page5/popup_tip1.png">
          </div>
          <div class="rectangle r2">
            <img src="images/page5/popup_tip2.png">
          </div>
          <div class="rectangle r3">
            <img src="images/page5/popup_tip3.png">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="popup center pdf" :class="{ show: pdfPopup.show }">
    <div class="popup_mask" @click="pdfPopup.show=false"></div>
    <div class="ref-head__close" @click="pdfPopup.show=false">
      <img src="images/ref-view-close.png">
    </div>
    <div class="popup_container">
      <div class="ref-frame">
        <div id="pdf"></div>
      </div>
    </div>
  </div>
</div>
<div style="left:1.3rem;" class="txt">
  <img src="images/txt.png">
</div>
<script>
  const { createApp } = Vue;
  const App = createApp({
    data() {
      return {
        currContent: 0,
        pdfPopup: {
          show: false,
          pdfh5: null
        },
        refPopup: {
          show: false,
          content: 1
        },
        contentPopup: {
          content: null,
          show: false
        }
      }
    },
    mounted() {},
    watch: {},
    methods: {
      onOpenRPView() {
        if(this.pdfPopup.pdfh5==null) {
          this.pdfPopup.pdfh5 = new Pdfh5('#pdf', {
            pdfurl: "pi.pdf",
            limit: 0
          });
        } else {
          this.pdfPopup.pdfh5.reset();
        }

        this.pdfPopup.show = true;
      }
    }
  }).mount('#app')
</script>
</body>
</html>
